<template>
    <div class="shop-car">
        <div>
            <p>我的购物车 <span>共{{plainOptions.length}}门课程</span></p>
        </div>
        <div>
            <div :style="{ borderBottom: '1px solid #E9E9E9' }">
                <a-row class="nav">
                    <a-col :span="5" style="padding-right: 125px; ">
                        <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange" >
                            全选
                        </a-checkbox>
                    </a-col>
                    <a-col :span="7" style="text-align: left; padding-left: 20px" >
                        课程名称
                    </a-col>
                    <a-col :span="4">
                        原价
                    </a-col>
                    <a-col :span="4">
                        优惠
                    </a-col>
                    <a-col :span="4">
                        操作
                    </a-col>
                </a-row>
            </div>
            <br/>
            <a-empty :image="simpleImage"  v-if="plainOptions.length==0"/>
            <a-row v-for="(item,index) in plainOptions" :key="index" class="center1">
                <a-col :span="5">
                <a-checkbox :checked="checkedList.includes(item)" @change="onChange($event,index,item)">
                    <img :src="item.course.bannerFileUrl" alt="" style="width: 160px; height: 100px;">
                </a-checkbox>
                </a-col>
                <a-col :span="7" style="text-align: left;">
                    {{item.course.courseTitle}}
                </a-col>
                <a-col :span="4">
                    <span style="text-decoration: line-through;">￥{{item.course.coursePrice}}</span><span style="color: orange;">￥{{item.course.discountPrice}}</span>
                </a-col>
                <a-col :span="4">
                    <a-tag color="#f50">
                        {{item.course.discountDesc}}
                    </a-tag>
                </a-col>
                <a-col :span="4">
                    <a-icon @click="delshop(item.shoppingCartId,item)" type="delete" style="color: #f50"/>
                </a-col>

            </a-row>
            <a-row class="nav" style="margin-bottom: 30px; height: 60px; line-height: 60px;">
                <a-col :span="5" style="padding-right: 130px; ">
                    <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange">
                        全选
                    </a-checkbox>
                </a-col>
                <a-col :span="14">
                </a-col>

                <a-col :span="3">
                    合计: <span style="font-size: 18px; font-weight: bold; color: #f50;">￥{{total}}</span>
                </a-col>
                <a-col :span="2" style="background-color: #f50; color: white; font-size: 18px">
                    提交
                </a-col>
            </a-row>

        </div>

    </div>
</template>

<script>

    import {mapState} from "vuex";
    export default {
        data() {
            return {
                checkedList: [],
                indeterminate: false,
                checkAll: false,
                plainOptions:[],
                total:"0.00"
            };
        },
        methods: {
            onChange(e,index,item) {
                if(e.target.checked){
                    if(!this.checkedList.some(item1=>item1==item)) {
                        this.checkedList.push(item);
                    }
                    // console.log(this.checkedList)
                }else {
                    this.checkedList.splice(this.checkedList.indexOf(item),1);
                    // console.log(this.checkedList)
                }
                this.indeterminate = this.checkedList!=0 && this.checkedList.length < this.plainOptions.length;
                this.checkAll = this.checkedList.length === this.plainOptions.length;
            },
            onCheckAllChange(e) {
                Object.assign(this, {
                    checkedList: e.target.checked ? this.plainOptions.concat() : [],
                    indeterminate: false,
                    checkAll: e.target.checked,
                });
            },
            delshop(id,item){
                let is = this;
                this.$confirm({
                    title: '你确定要删除吗?',
                    okText: '确定',
                    okType: 'danger',
                    cancelText: '取消',
                    onOk() {
                        is.checkedList.splice(is.checkedList.indexOf(item),1);
                        is.plainOptions.splice(is.plainOptions.indexOf(item),1);
                        is.$store.dispatch("delshopCar",id);
                        // console.log('OK');
                    },
                    onCancel() {
                        // console.log('取消');
                    },
                    class: 'test',
                });



            }
        },
        created() {
            this.plainOptions = this.shopCar.concat();

        },
        watch:{
            checkedList(){
                this.total = 0;
                for(let item of this.checkedList){
                    if(item.course.isDiscount=="1"){
                        this.total += item.course.discountPrice;
                    }else {
                        this.total += item.course.coursePrice;
                    }
                }
                this.total = this.total.toFixed(2)
            }
        },
        computed:{
            ...mapState(["shopCar"]),
        }
    };
</script>

<style lang="less" scoped>
    .shop-car {
        width: 1200px;
        margin: 0 auto;
    }
    .nav{
        height: 50px;
        line-height: 50px;
        background-color: rgb(250,250,250);
        text-align: center;
        border: 1px solid rgb(232,232,232);
    }
    .center1{
        height: 120px;
        line-height: 120px;
        text-align: center;
        border: 1px solid rgb(232,232,232);
        margin-bottom: 20px;
    }
</style>